<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul li {
				float: left;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="pre()">上一张</button>
		<button type="button" onclick="next()">下一张</button>
		<ul style="list-style: none;">
			<li><img src="../img/1.webp" width="300" /></li>
			<li><img src="../img/2.webp" width="300" /></li>
			<li><img src="../img/3.webp" width="300" /></li>
		</ul>
		<script type="text/javascript">
			let ul = document.getElementsByTagName("ul")[0];
			let i = 0;//当前显示的图片索引
			let len = ul.children.length;
			function show(i) {
				for(let index in ul.children) {
					let item = ul.children[index];
					console.log(parseInt(index) === i)
					if(parseInt(index) === i) {
						item.style.display = "inline-block";
					} else {
						item.style.display = "none";
					}
				}
			}
			
			function pre() {
				if(i === 0) {
					i = len;
				}
				i--;
				show(i);
				console.log(i);
			}
			
			function next() {
				if(i === len - 1) {
					i = -1;
				}
				i++;
				show(i);
			}
			
			show(i);
		</script>
	</body>
</html>
